<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #000;
            transition: all 1s ease-in;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        let div = document.getElementsByTagName('div')[0];
        div.addEventListener('mouseover', function() {
            setTimeout(() => {
                this.style.width = '200px';
                this.style.height = '200px';
            }, 10)
        })
        div.addEventListener('mouseleave', function() {
            setTimeout(() => {
                this.style.width = '100px';
                this.style.height = '100px';
            }, 10)
        })
    </script>
    <script>
        // 箭头函数
        // 1.箭头函数没有自己的this对象
        // 2.不可以当作构造函数，不能new，会报错
        // 3.没有原型，没有prototype属性
        // 4.没有arguments绑定，必须依赖于具名参数或剩余参数来访问函数的参数
        // 5.严格模式下不允许重复参数名


        // let fn = v => v; //前面是参数，后面是函数体
        // 等同于
        // let fn = function(v) {
        //     return v;
        // }


        // let sum = (a, b) => {
        //     a++;
        //     console.log(a + b);
        // };
        // sum(1, 2);

        // 当箭头函数只有单个参数时，该函数可以直接书写而不需要额外的语法
        // 没参数也要写上括号，表示参数部分

        // 默认参数
        // (a = xx, b = xx, c = xx)
        // es5:
        // function show(a, b, c) {
        //     b = b || 5;
        //     c = c || 12;

        // console.log(a, b, c);
        // }
        // show(12, 37);
        // es6:
        // (a = xx, b = xx, c = xx)


        // 参数展开(剩余参数,数组展开)
        // 1.“三个点”的第1个用途：接收剩余参数
        // function show(a, b, ...名字)
        // 剩余参数必须在参数列表的最后
        // function show1(...args) {
        //     show2(...args);
        // }

        // function show2(a, b) {
        //     console.log(a + ',' + b);
        // }
        // show1(12, 5);

        // '三个点'的第2个用途:展开一个数组
        // let arr = [1, 2, 3];
        // let arr2 = [4, 5, 6, 7];
        // arr.push(...arr2);
        // console.log(arr);




        // let getUseName = id => {
        //     name: 'asdw',
        //     age: 22
        // };//报错
        // let getUseName = id => ({
        //     name: 'asdw',
        //     age: 22
        // }); //不报错


        // 箭头函数和变量解构结合使用
        // const fullName = ({
        //     firstName,
        //     lastName
        // }) => console.log(firstName + '' + lastName);
        // // 等同于
        // // function fullName(student) {
        // //     console.log(student.firstName + '' + syudent.lastName);
        // // }
        // let name = {
        //     firstName: '猪',
        //     lastName: '肛裂'
        // }


        // 排序
        // var arr = [7, 4, 8, 8, 7, 1, 2, 7, 8];
        // // var bu = arr.sort(function(a, b) {
        // //     return b - a;
        // // })
        // // 等同于
        // let bu = arr.sort((a, b) => b - a);



        // 箭头函数this绑定不受影响
        // function Timer() {
        //     this.s1 = 0;
        //     this.s2 = 0;
        //     setInterval(() => this.s1++, 1000);
        //     setInterval(function() {
        //         this.s2++;
        //     }, 1000)
        // }
        // let timer = new Timer();
        // setTimeout(() => console.log('s1指向', this, timer.s1), 3000)
        // setTimeout(() => console.log('s2指向', this, timer.s2), 3000)
    </script>
</body>

</html>